<template>
  <div>
    <el-card class="tree-box" header="测试tree">
      <el-input v-model="filterText" placeholder="输入关键字进行过滤" />

      <el-tree
        ref="tree"
        :data="data"
        :props="defaultProps"
        default-expand-all
        :filter-node-method="filterNodeMethod"
        @node-click="nodeClickHandle"
      />
      <!-- :filter-node-method="filterNode" -->
    </el-card>
  </div>
</template>

<script>
import treeData from './data'
export default {
  data() {
    return {
      filterText: '',
      data: [
        {
          id: 1,
          label: '一级 1',
          children: [
            {
              id: 4,
              label: '二级 1-1',
              children: [
                {
                  id: 9,
                  label: '三级 1-1-1',
                  children: [
                    {
                      id: +new Date(),
                      label: '四级 1-1-1-1'
                    }
                  ]
                },
                {
                  id: 10,
                  label: '三级 1-1-2'
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: '一级 2',
          children: [
            {
              id: 5,
              label: '二级 2-1'
            },
            {
              id: 6,
              label: '二级 2-2'
            }
          ]
        },
        {
          id: 3,
          label: '一级 3'
          // children: [
          //   {
          //     id: 7,
          //     label: '二级 3-1'
          //   },
          //   {
          //     id: 8,
          //     label: '二级 3-2'
          //   }
          // ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },

  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    // this.data = treeData
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },

    nodeClickHandle(data, node) {
      // console.log(this.transformNode(node)) // sy-log
      const n = this.transformNode(node)
      console.log(this.getRootNodeName(node))
      // console.log(this.getNodeLevel(n)) // sy-log
    },

    // 去除level属性
    transformNode(node) {
      const n = { ...node, label: node.label }
      delete n.text
      delete n.level

      let p = n
      while (p.parent) {
        p.parent = { ...p.parent, label: p.parent.label }
        delete p.parent.text
        delete p.parent.level
        const pc = p
        p = p.parent
        if (p && !p.parent) {
          delete pc.parent
        }
      }
      return n
    },

    getRootNodeName(node) {
      if (!node) return
      if (node.level === 1) {
        return node.label
      }
      return this.getRootNodeName(node.parent)
    },

    /* getRootNodeName(node) {
      if (!node) return
      while (node.level > 1) {
        node = node.parent
      }
      return node.label
    }, */

    // 获取当前节点层级
    getNodeLevel(node) {
      if (!node.parent) return 1
      return this.getNodeLevel(node.parent) + 1
    },

    // 获取当前节点层级
    getNodeLevel(node) {
      let n = 1
      let p = node
      while (p.parent) {
        p = p.parent
        n++
      }
      return n
    },

    /* getNodeByRootLevel(node, level) {
      let ret = '暂无'
      const dfs = node => {
        if (!node.parent) {
          return 1
        }
        if (dfs(node.parent) + 1 === level) {
          ret = node.label
          return
        }
        return dfs(node.parent) + 1
      }
      dfs(node)
      return ret
    } */

    /* getNodeByRootLevel(node, level) {
      let p = node
      while (p.parent) {
        p.parent.next = p
        p = p.parent
      }
      while (--level && p.next) {
        p = p.next
      }
      return level ? '暂无' : p.label
    }, */

    /**
     * @description: 提供给树形控件的过滤方法
     * @param { String } value 过滤值
     * @param { Object } data 节点数据
     * @param { Object } node 节点信息
     * @param { Function } node 节点信息
     * @return {*}
     */
    filterNodeMethod(value, data, node) {
      if (!value) {
        return true
      }
      return this.deepfilterChildNode(value, this.transformNode(node))
    },

    /**
     * @description: 深度筛选如果父节点包含，不要筛选掉子节点
     * @param { String } value 过滤值
     * @param { Object } data 节点数据
     * @param { Object } node 节点信息
     * @return {*}
     */
    /*  deepfilterChildNode(value, node) {
      const { filterNodeByIndexOf } = this
      if (filterNodeByIndexOf(node.label, value)) {
        return true
      }

      // 一级节点没有父级
      if (node.level === 1) return false

      const maxNode = 1 // 往上找到最大那个节点结束
      // 多级节点父级符合条件，不要、过滤子级
      let parentNode = node.parent

      while (parentNode.level > maxNode) {
        if (filterNodeByIndexOf(parentNode.label, value)) {
          return true
        }

        parentNode = parentNode.parent
      }

      // 当前节点的最大父节点都没找到
      return false
    }, */

    deepfilterChildNode(value, node) {
      if (!node) return false
      const { filterNodeByIndexOf, deepfilterChildNode } = this
      if (filterNodeByIndexOf(node.label, value)) {
        return true
      }
      return deepfilterChildNode(value, node.parent)
    },

    /**
     * @description: 根据indexOf过滤
     * @param { Strng } label 节点名称
     * @param { String } value 过滤值
     * @return {*}
     */
    filterNodeByIndexOf(label, value) {
      return label.indexOf(value) !== -1
    }
  }
}
</script>
<style scoped lang="scss">
.tree-box {
  margin: 80px 150px;
}
</style>
